<template>
	<div>
		 <!-- 顶部导航 -->
    <!-- <div class="top_tab"> 
      <span>通知公告</span>
    </div> -->
     <!-- 空DIV -->
    <!-- <div class="hight-r"></div> -->
		<div class="center">
			<div class="title">
				<span>{{list.title}}</span> 
			</div>
			<div class="infos">
				<div class="lf">
					<div class="bq">
						<img src="@as/img/zuzhi_wode_bq@2x.png" alt="">
						<!-- 1普通通知 2重要通知 3紧急通知 --> 
						<span v-if="list.nature == 1">党建作风</span>
						<span v-if="list.nature == 2">重要通知</span>
						<span v-if="list.nature == 3">紧急通知</span>
					</div>
					<span>{{(list.create_time) | time}}</span>
				</div>
				<!-- 收藏 -->
				<div class="sc" v-if="is_collection_id==0"  @click="collect">
					<img src="@as/img/@asimgzuzhi_wode_xh@2x.png.png" alt="">
					<span>收藏</span>
				</div>
				<!-- 已收藏 -->
				<div class="ysc" v-if="is_collection_id==1" @click="abrogate">
					<img src="@as/img/@ysc_wode_xh@2x.png" alt="">
					<span>已收藏</span>
				</div>
			</div>
			
			<p class="fu" v-html="list.content"></p>
			
			<div class="pic">
				
			</div>
		</div>
		<div class="fj" v-if="list.accessory!=null">
			<div class="box">
				<span class="title">附件</span>
				<div class="bar">
					<img src="@as/img/zuzhi_wode_fj@2x.png" alt=""> 
					<a :href="list.accessory">{{list.accessoryName}}</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
			data() {
				return {
					collection_id: '',
					is_collection_id:'',//收藏的值 1是已收藏 0是未收藏
					eid:'',
					list:{}
				}
			},
			mounted() {
				 this.$progress.done();
         this.getMeetingDetails();
			},
			methods: {
				// 详情
				async getMeetingDetails () {  
					let that = this;
					try {
						let params = {
							id:that.eid,
							uid: JSON.parse(Cookies.get('user_71ydj')).id,
						}
						const url = `/app/workplan/infrom_info`
						let res = await that.$http.get(url, params)
						that.$progress.done()
						if (res.code === 200) {
							that.list = res.data;
							that.is_collection_id = res.data.is_collection_id;
							that.collection_id = res.data.collection_id
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				// 收藏
				async collect () {  
					let that = this;
					try {
						let params = {
							id:that.list.id,
							uid: JSON.parse(Cookies.get('user_71ydj')).id,
							type: 2,
							resources_type: 4
						}
						const url = `/app/NewCustom/collection` 
						let res = await that.$http.post(url, params)
						that.$progress.done()
						if (res.code === 200) {
							that.getMeetingDetails();
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				// 取消收藏
				async abrogate () {  
					let that = this;
					try {
						let params = {
							collection_id:that.collection_id,
						}
						const url = `/app/NewCustom/cancel_collection`
						let res = await that.$http.post(url, params)
						that.$progress.done()
						if (res.code === 200) {
							that.getMeetingDetails();
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
			created(){
				this.eid = this.$route.query.id; 
			}
	}
</script>

<style>
	.fu{
		width:100%!important;
		font-size: 14px!important;
		color: #666;
	}
	.fu img{
		max-width:100%!important;
	}
</style>

<style scoped lang="scss">
/* 顶部tab */
.top_tab {
  width:100%;
	height:50px;
  padding:0 15px;
  background: #FFF;
  display: flex;
	position: fixed;
  justify-content: center;
  align-items: center;
	z-index: 20;
	// box-shadow: 1px 2px 2px #f1f1f1;
	span {
		color: #333;
		font-size: 18px;
		font-weight: bold;
	}
}
/* 顶部空 */
.hight-r {
  height: 1rem;
}
.center{
	width:100%;
	padding: 5px 15px 15px 15px ;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.title{
		width:100%;
		margin-top: 5px;
		span{
			font-size: 18px;
			color: #333;
			display: inline-block;
			line-height: 1.5;
			font-weight: bold;
		}
	}
	.infos{
		width:100%;
		padding: 15px 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.lf{
			display: flex;
			flex-direction: column;
			align-items: center;
			.bq{
				display: flex;
				align-items: center;
				img{
					width:17px;
					height:16.5px;
				}
				span{
					color:#999;
					font-size: 12px;
					margin-left: 5px;
				}
			}
			span{
				color: #999;
				font-size: 12px;
				margin-top: 2px;
			}
		}
		.sc{
			width:61px;
			height:27px;
			background:-webkit-linear-gradient(left,#f47447,#eb4e44);
			background:-o-linear-gradient(right,#f47447,#eb4e44);
			background:-moz-linear-gradient(right,#f47447,#eb4e44);
			background:linear-gradient(to right,#f47447,#eb4e44);
			border-radius: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 27px;
			img{
				width:15px;
				height:15px;
			}
			span{
				color: #FFF;
				font-size: 12px;
				margin-left: 2px;
				margin-top: 2px;
			}
		}
		.ysc{
			width:75px;
			height:27px;
			background: #F6F6F6;
			border-radius: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 27px;
			img{
				width:15px;
				height:15px;
			}
			span{
				color: #EB4D44;
				font-size: 12px;
				margin-left: 2px;
				margin-top: 2px;
			}
		}
	}
	// .ql-align-center{
	// 	width:100%;
	// 	overflow: hidden;
	// 	font-size: 14px!important;
	// 	color: #666;
	// 	text-indent: 2em;
	// 	img{
	// 		width:100%
	// 	}
	// }
	img{
			max-width:100%
		}
	ul, li, p{
		font-size: 14px!important;
		color: #666;
	} 
	.pic{
		width:100%;
		img{
			width:100%;
		}
	}
}
.fj{
	width:100%;
	padding: 0 15px 30px 15px;
	box-sizing: border-box;
	.box{
		width:100%;
		padding: 20px 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		box-shadow:-3px 8px 20px #f1f1f1;
		.title{
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.bar{
			width:100%;
			display: flex;
			align-items: center;
			margin-top: 10px;
			img{
				width:17.5px;
				height:18px;
				margin-right: 5px;
			}
			a{
				text-decoration:none; 
				font-size: 14px;
				color: #666 !important;
				display: inline-block;
				line-height: 1.2;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
	}
}
</style>